<template>
	<view class="main">
		<u--form :rules="rules" :model='formData' ref='form'>
			<view class="main_id">
				<u-form-item style="width: 100%;height: 100%;border: none;" prop="name">
					<u--input :placeholder="storeName.name" v-model="formData.name"></u--input>
				</u-form-item>
			</view>
			<view class="main_photo">
				<view class="main_photo_main">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" multiple
						:deletable='false' :maxCount="1" width="100" height="100"
						style="display: flex;justify-content: center;">
						<text style="font-size: 200rpx;margin: 0 auto;" v-if="!storeName.avatar_url">+</text>
						<image :src="storeName.avatar_url" style="width: 100%;height: 100%;"></image>
					</u-upload>
				</view>
				<view class="main_photo_text">
					<text>头</text>
					<text>像</text>
				</view>
			</view>
			<view class="button">
				<view class="button_true" @click="upLoadData">
					好了
				</view>
				<view class="button_algin">
					再来一次
				</view>
			</view>
		</u--form>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				OSSkey:'',
				OSStoken: {},
				fileList: [],
				formData: {
					name: ''
				},
				rules: {
					'name': [{
							required: true,
							message: '此为必填字段',
							trigger: ['blur', 'change'],
						},
						{
							min: 1,
							max: 8,
							message: '长度在1-8个字符之间',
							trigger: ['blur', 'change'],
						},
					],
				}
			};

		},
		methods: {
			...mapActions('indexStore', ['getUserData']),
			async afterRead({
				file
			}) {
				await this.upPhotoData(file[0])
			},
			async upPhotoData({
				name,
				url
			}) {
				name = uni.$u.guid(20) + name.slice(name.lastIndexOf('.'))
				const {
					policy,
					accessid,
					success_action_status = '200',
					signature
				} = this.OSStoken
				let parmars = {
					'key': name,
					policy,
					OSSAccessKeyId: accessid,
					success_action_status,
					signature,
				}
				let result = await uni.uploadFile({
					url: 'https://laravel-book-shop.oss-cn-beijing.aliyuncs.com/',
					filePath: url,
					name: 'file',
					formData: parmars,
				});
				if(result[1].data === ''){
					this.OSSkey = name
					if(this.OSSkey){
						const result3 = await uni.$u.api.reqChangUserImg(this.OSSkey)
						const result2 = await this.getUserData(this)
						result2&&result3 ? uni.showToast({
							title:'修改',
							icon:'none'
						}) : ''
					}
				}
			},
			async upLoadData() {
				const _this = this
				if ( await this.$refs.form.validate()) {
					let result3
					const result1 = await uni.$u.api.reqChangName(this.formData.name)
					const result2 = await this.getUserData(this)
					if (result2) {
						uni.showToast({
							title:'更改成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '修改失败请重试',
							icon: 'none'
						})
					}
				}
			}
		},
		computed: {
			storeName() {
				return this.$store.state.indexStore.userData || ''
			},
		},
		async onLoad() {
			const result = await uni.$u.api.reqOSSToken()
			if (result.accessid) {
				this.OSStoken = result
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-form-item__body {
		padding: 0 !important;

		.u-border {
			border: none;
		}

	}

	/deep/.u-form-item__body__right__message {
		margin-top: -45rpx !important;
		color: #7577D7;
		font-weight: 600;
		display: flex;
		justify-content: flex-end;
		padding-right: 20rpx;
	}

	/deep/.u-upload__wrap {
		justify-content: center;
		&>view{
			width: 100%;
			height: 100%;
		}
	}
	/deep/.u-upload{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
	}
	.main {
		[class^='main'] {
			width: 90%;
			height: 80rpx;
			background-color: #A0F489;
			margin: 20rpx auto;
			overflow: hidden;
			border-radius: 20rpx;
		}

		.main_photo {
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.main_photo_main {
				height: 90%;
				width: 43%;
				margin-right: 10rpx;
				background-color: #00D6DC;
				border-radius: 50%;
				overflow: hidden;
				box-sizing: border-box;
				padding: 10rpx;
			}

			.main_photo_text {
				width: 45%;
				height: 90%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 90rpx;
				font-weight: 600;
			}
		}

		.button {
			height: 80rpx;
			width: 90%;
			margin: 30rpx auto;
			display: flex;
			justify-content: space-between;

			[class^='button'] {
				width: 40%;
				height: 100%;
				border-radius: 20rpx;
				background-color: #F9F871;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 700;

			}
		}

		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: flex-start;
		height: 600rpx;
		width: 95%;
		margin: 0 auto;
		border-radius: 20rpx;
		margin-top: 20rpx;
		display: flex;
		overflow: hidden;
		background-color: #EBFCFF;
	}

	page {
		background-color: #00A2F0;
	}
</style>
